<template>
  <view class="content">
    <view class="register-form">
      <u-form labelPosition="top" :model="form" :rules="rules" ref="uForm">
        <view style="margin-bottom: 100rpx;">
          <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <image class="avatar" :src="getAvatar"></image>
            <text>点击授权头像</text>
          </button>
        </view>
        <u-form-item label="昵称" prop="nickName" borderBottom>
          <u-input v-model="form.nickName" placeholder="请输入昵称" type="nickname" border="none"></u-input>
        </u-form-item>
        <u-form-item label="手机号" prop="phonenumber" borderBottom>
          <u-input v-model="form.phonenumber" placeholder="完善手机号进行认证" readonly border="none"></u-input>
          <button slot="right" size="mini" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
        </u-form-item>
        <u-form-item label="性别" prop="sex" borderBottom>
          <u-radio-group v-model="form.sex" placement="row">
            <u-radio name="0" label="男"></u-radio>
            <u-radio name="1" label="女"></u-radio>
          </u-radio-group>
        </u-form-item>
      </u-form>
    </view>
    <view class="submit">
      <u-button type="primary" text="保存" @click="submit"></u-button>
    </view>
  </view>
</template>

<script>
import userApi from '../../request/api/auth'
import config from '../../request/config'
import { mapGetters } from 'vuex'

const baseForm = {
  nickName: '',
  phonenumber: '',
  sex: '',
}
export default {
  data() {
    return {
      avatar: '',
      currentFilePath: '',
      showEnd: false,
      showStart: false,
      form: { ...baseForm },
      rules: {
        nickName: [{ required: true, message: '请输入昵称', trigger: ['blur'] }],
        phonenumber: [
          { required: true, message: '点击右侧获取手机号', trigger: ['blur'] },
          { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', trigger: ['blur'] }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: ['change'] }
        ]
      },
    }
  },
  async onShow() {
    await this.$store.dispatch('userInfo/GetInfo')
    this.$refs.uForm.setRules(this.rules)
    this.form.nickName = this.user.nickName
    this.form.phonenumber = this.user.phonenumber
    this.form.sex = this.user.sex
  },
  computed: {
    ...mapGetters('userInfo', ['user', 'isGridWorker', 'isCommon', 'isMerchant', 'isLawyer', 'isNightMarketAdministrator']),
    getAvatar() {
      const userAvatar = this.user.avatar
      if (userAvatar){
        return config.baseUrl + userAvatar
      } else {
        return 'https://sanshengcai.com/home/images/avatar.png'
      }
    },
  },
  methods: {
    //获取微信头像
    async onChooseAvatar(e) {
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      try {
        var { imgUrl } = await uni.$http.upload('/system/user/profile/upload', e.detail.avatarUrl)
      } finally {
        uni.hideLoading();
      }
      this.form.avatar = imgUrl
      this.avatar = config.baseUrl + imgUrl
    },
    /**
     * 获取手机号
     * @param {*} e 
     */
    async getPhoneNumber({ detail }) {
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      try {
        var { data } = await userApi.getPhone({
          code: detail.code,
        })
      } finally {
        uni.hideLoading()
      }
      this.form.phonenumber = data
    },
    back() {
      uni.navigateBack()
    },
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    back() {
      uni.navigateBack()
    },
    async submit() {
      await this.$refs.uForm.validate()
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      try {
        await userApi.updateUserProfile({
          ...this.form,
          userId: this.user.userId,
        })
      } finally {
        uni.hideLoading()
      }
      // 同步修改本地数据
      this.$store.commit('userInfo/SET_USER', { ...this.user, ...this.form })
      uni.$showMsg('保存成功')
      setTimeout(() => {
        this.back()
      }, 1000)
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  height: 100vh;
  background-color: #f8f9fa;
  padding-top: 30rpx;
}

.register-form {
  box-sizing: border-box;
  padding: 25rpx 50rpx 35rpx;
  background-color: #fff;
  box-sizing: border-box;
  height: calc(100% - 200rpx);
  overflow-y: auto;

  &::v-deep .u-radio__text {
    margin-right: 15rpx;
  }
}

.submit {
  background-color: #fff;
  height: 200rpx;
  padding: 25rpx 40rpx 0;
}

.content::v-deep .u-form-item__body__left__content__label {
  width: 200rpx;
  margin-bottom: 15rpx;
}

// 以下是登录页面测试功能 开始
.avatar-wrapper {
  margin-top: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  font-size: 28rpx;
  color: #1d2129;
  .avatar {
    height: 120rpx;
    width: 120rpx;
    border-radius: 60rpx;
    border: 1px solid #eee;
    margin-bottom: 20rpx;
  }
}

.avatar-wrapper::after {
  border: none;
}
</style>
